<template>
  <div id="main-container">
    <HeaderBanner @refleshload="refleshload" />
    <YouFoListMainContent ref="child" />
    <MainBannerComponents />
  </div>
</template>
<script>
import HeaderBanner from "@/components/HeaderBanner.vue";
import YouFoListMainContent from "@/components/YouFoListMainContent.vue";
import MainBannerComponents from "@/components/MainBannerComponents.vue";
export default {
  name: "YouFoListView",
  components: {
    HeaderBanner,
    YouFoListMainContent,
    MainBannerComponents,
  },
  props: {
    msg: String,
  },
  methods: {
    refleshload() {
      //调用子组件刷新数据
      this.$refs.child.initData();
    },
  },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#main-container {
  display: flex;
  justify-content: center;
  margin-top: 15px;
}

@media screen and (max-width: 720px) {
  #main-container {
    margin-top: 0px !important;
  }
}
</style>